<div class="bjui-pageHeader">
    <form id="pagerForm" data-toggle="ajaxsearch"
          action="${request.getContextPath()}/OncePassYieldByDefect/oncePassYieldByDefect" method="post">
        <div class="bjui-searchBar">
            <g:hiddenField name="SYS_QUERY_NAME" value="oncePassYieldByDefect"/>
            <g:hiddenField name="EXPORT_CONTENT_NAME" value="oncePassYieldByDefect"/>
            <label>客户：</label>
            %{--<g:select name="customerLotId" from="${customerLotIdList}" data-toggle="selectpicker" data-live-search="true"--}%
                      %{--optionKey="CUSTOMER_LOT_ID" optionValue="CUSTOMER_LOT_ID" value="${customerLotId}" data-width="130"--}%
                      %{--noSelection="['': '-- All --']"/>&nbsp;--}%
            <g:textField name="customerLotId" value="${customerLotId}" size="15" placeholder="客户" />&nbsp;
            <label>方向：</label>
            <g:select name="customerDirect" from="${partDirect}" data-toggle="selectpicker" data-live-search="true"
                      optionKey="description" optionValue="text" value="${customerDirect}" data-width="130"
                      noSelection="['': '-- All --']"/>&nbsp;
            <label>客户图号：</label>
            <input type="text" name="group4" value="${group4}" size="17" placeholder="客户图号"/>&nbsp;
            <label>内部图号：</label>
            <input type="text" name="group3" value="${group3}" size="17" placeholder="内部图号"/>&nbsp;
            <label>不良类型：</label>
            <input type="text" name="defectType" value="${defectType}" size="15" placeholder="不良类型"/>
            <br/><br/>
            <label>检查工序：</label>
            <g:select name="checkStep" from="${checkStepList}" data-toggle="selectpicker" data-live-search="true"
                  optionKey="step_name" optionValue="step_desc" value="${checkStep}" data-width="150"
                  noSelection="['': '-- All --']"/>&nbsp;
            <label>送检时间<strong><span class="text-danger">*</span></strong>：</label>
            <input type="text" name="startTime" readonly value="${startTime}" data-rule="required"
                   data-pattern="yyyy-MM-dd" size="11" data-toggle="datepicker" placeholder="FROM">
            <input type="text" name="endTime" readonly value="${endTime}" data-rule="required"
                   data-pattern="yyyy-MM-dd" size="11" data-toggle="datepicker" placeholder="TO">&nbsp;
        %{--<label >大组类：</label>&nbsp;
        <input type="text" name="totalGroup" value="${totalGroup}"/>
        <label >小分类：</label>&nbsp;
        <input type="text" name="detailCate" value="${detailCate}"/>
        <label >批次号：</label>&nbsp;
        <input type="text" name="lotId" value="${lotId}"/>--}%
            <button type="submit" class="btn-default" data-icon="search">查询</button>&nbsp;
            <button type="button" class="btn-blue"
                    onclick="javascript:bjuiExportExl('#pagerForm', '${request.getContextPath()}/OncePassYieldByDefect/exponcePassYieldByDefect')"
                    data-icon="file-excel-o" title="导出Excel">导出</button>
        </div>
    </form>
</div>

<div class="bjui-pageContent">
    <g:if test="${oncePassYieldByDefect.size() > 0}">
        <div id="oncePassYieldByDefectTen" style="width:100%;height:58%;"></div>
        <script src="${request.getContextPath()}/js/echarts/echarts.js"></script>
        <script src="${request.getContextPath()}/js/echarts/echarts-tool.js"></script>
        <script type="text/javascript">
            var contextPath = "${request.getContextPath()}";
            eChartsTool.init(contextPath);
            var data = [];
            <g:each in="${oncePassYieldByDefectTen}" status="i" var="tableInstance">
            data.push('${tableInstance.DEFECT_ITEM}');
            </g:each>
            var option = {
                title: {},
                tooltip: {
                    trigger: ''
                },
                legend: {
                    data: ['缺陷数量', '缺陷占比','占不良比例']
                },
                xAxis: {
                    data: data,
                    name: '缺陷项',
                    show: true
                },
                yAxis: [
                    {
                        type: 'value',
                        splitNumber: 5,
                        name: '缺陷数量',
                        show: true
                    },
                    {
                        type: 'value',
                        name: '比例',
                        splitNumber: 5,
                        axisLabel: {
                            formatter: '{value}%'
                        },
                        show: true
                    }
                ],
                series: [
                    {
                        name: '缺陷数量',
                        type: 'bar',
                        data:${oncePassYieldByDefectTen.DEFECT_QTY}
                    },
                    {
                        name: '缺陷占比',
                        type: 'line',
                        data:${list},
                        yAxisIndex: 1
                    },
                    {
                        name: '占不良比例',
                        type: 'line',
                        data:${list1},
                        yAxisIndex: 1
                    }
                ]
            };
            eChartsTool.setOption("roma", document.getElementById('oncePassYieldByDefectTen'), option);
        </script>

        <div style="margin: 20px">
            <table data-toggle="tablefixed" data-width="100%" data-nowrap="true">
                <thead>
                <tr id="t1">
                    <g:each in="${tableHeadList}" status="j" var="headInstance">
                        <g:if test="${headInstance != 'RN'}">
                            <th width="125"><g:message code="${headInstance}" default="${headInstance}"/></th>
                        </g:if>
                    </g:each>
                </tr>
                </thead>
                <tbody>
                    <g:each in="${oncePassYieldByDefect}" status="i" var="dataInstance">
                        <tr>
                            <g:each in="${tableHeadList}" status="j" var="headInstance">
                                <g:if test="${headInstance == 'DEFECT_QTY' && headInstance != 'RN'}">
                                    <td name="ONCEPASSBYDEFECT${i}">${dataInstance["${headInstance}"]}</td>
                                </g:if>
                                <g:elseif test="${headInstance != 'ZHANBULIANGBILISHU' && headInstance != 'RN'}">
                                    <td>${dataInstance["${headInstance}"]}</td>
                                </g:elseif>
                            </g:each>
                        </tr>
                    </g:each>
                    <tr>
                        <td colspan="1">合计</td>
                        <td name="oncePassYieldByDefectShow"></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </g:if>
    <g:else>
        <g:render template="../template/emptyPanel"/>
    </g:else>
</div>

<script>
    $(function () {
        var oncePassYieldByDefect = 0;
        for (var i = 0; i <${oncePassYieldByDefect.size()}; i++) {
            var oncepassbydefect = 'ONCEPASSBYDEFECT' + i
            var oncePassByDefectAdd = $("td[name='" + oncepassbydefect + "']").text() == '' ? 0 : parseInt($("td[name='" + oncepassbydefect + "']").text());
            oncePassYieldByDefect += oncePassByDefectAdd;
        }
        $("td[name='oncePassYieldByDefectShow']").html(oncePassYieldByDefect);
    });
</script>